
// 类组件
import React, { useState } from "react"

export default class DemoA extends React.Component {
    constructor() {
        super();
        this.state = {
            num: 1
        }
    }
    add() {
        // 这种写法 在旧值和新值没有关联的时候去使用 state 表示原先的旧的状态   
        // 不会去直接强制改变状态
        // this.setState(state => ({ num: state.num + 1 }))

        // 这种写法 就是使用旧的值和新的值有关连 需要使用旧的状态去+1
        this.setState({
            num: this.state.num + 1
            // 后面添加回调函数 在add()方法执行后 会自动执行
        }, this.add2())
    }
    // 回调函数  会在函数方法 执行后自动执行
    add2() {
        console.log(this.state.num)
    }
    render() {
        let { num } = this.state
        // return (
        //     <div>
        //         <h3>类组件</h3>
        //         <h1>{num}</h1>
        //         <button onClick={this.add.bind(this)}>+1</button>
        //     </div>
        // )


        return (
            React.createElement(
                "div",
                { className: 'box' },
                [
                    React.createElement('h3', { key: 1 }, '类组件'),
                    React.createElement('h1', { key: 2 }, '111'),
                ]
            )
        )
    }
}